前言

B端设计更加注重业务逻辑以及功能的实现，在以前很多B端产品在设计美观上都没有那么重视，但是随着用户对视觉美感的提升，对于视觉的要求有所提升，不能只是功能的堆积，在满足基本功能的同时，良好的视觉效果也有利于用户提升工作效率。

今天主要分享关于在B端产品中图标的设计，由于B端的产品功能业务比较强，在视觉上很难实现和C端产品设计一样，所以在B端产品中，我们可以从一些细微之处来体现产品设计的两点，并且增强视觉效果。图标在B端产品中尤为重要，并且在很多界面都会存在，一些简单的功能图标依旧采用简洁的样式即可，我们可以从产品菜单的图标着手展开设计。

来源dribbble：Afshin T2Y

一、线性图标（单色&多色）

线性图标是非常常用的图标，无论是在B端还是C端产品中，简洁的线性图标能够很好的展示图标的含义，在B端产品中，线性图标一般会运用到每个界面中的一些操作功能上，当然在菜单栏中，也可以使用线性图标。

线性图标本身是比较简洁的，所以有时候会通过颜色的装饰来美化图标，线性图标包含单色线性图标和多色线性图标，如下图为单色线性图标：

多色线性图标一般会采用主题色+辅助色的形式，多色线性图标在视觉上比单色线性图标看起来更加精致美观，也可以在B端产品中提升视觉效果。多色线性图标案例如图：

二、面性图标（单色&多色）

面性图标在B端产品的菜单栏中更为广泛的被运用，因为很多页面的功能性图标大部分采用的是线性图标，所以菜单栏的图标会和功能性图标做出差异化，从而突出层级。如下图：

多色面性的图标在视觉上又更加耐看，并且也更显精致，能够更好的展示图标的层级关系，并且也能更好的与其他界面功能性的图标区分开，如下图：

三、线+面性图标

下面就只展示图标不列举案例了，线+面性的图标比多色面性的图标看起来更有轮廓感，给人的视觉效果有所不同，面性色彩部分的装饰，让图标看起来更美观，并且更能突出主题色。

四、质感图标

质感的图标是最近几年比较流行的，在C端的界面使用更为广泛，在B端系统界面中目前还不是很常用，不过在一些暗色系的B端系统也会采用质感图标做视觉上的突出显示，更能体现产品的高级和科技感

总结

图标的种类有很多，不同的图标颜色给人的视觉效果不同，在设计时，需要考虑系统的调性以及界面的层级关系，来选择合适的图标样式，才能更好的体现产品以及是产品的调性达到一致性，也能给B端产品带来更加合适的视觉效果。



本文原创，未经作者允许不可转载！

更多内容，欢迎关注作者微信公众号：设计小余！